<script setup>
import scrollboard from './scrollboard.vue'
import { leftOneConfig, left1Data, compentsKey } from '../pages/home/index'
</script>

<template>
  <!-- 三防状态 -->
  <div class="flex flex-col">

    <div class="w-full h-[28px] mb-[68px] relative">
      <img class="w-full h-[28px]" src="../assets/one/one_left_1.gif" alt="">
      <div style="color: #80D4FF;"
        class="absolute left-0 right-0 top-0 bottom-0 flex justify-center items-center text-[14px]">
        三防状态
      </div>
    </div>
    <div class="w-[320px] h-[36px] mx-auto relative">
      <img class="w-full h-full" src="../assets/one/one_left_2.png" alt="">
      <img class="w-[80px] h-[36px] left-[40px] bottom-[12px] absolute" src="../assets/one/one_left_3.png" alt="">
      <img class="w-[48px] h-[48px] left-[56px] bottom-[26px] absolute around_rotate" src="../assets/one/one_left_4.png"
        alt="">
      <span class="absolute left-[152px] bottom-[16px] text-white text-[16px]">当前通风方式</span>
      <span class="absolute left-[152px] bottom-[42px] text-white text-[24px] main_color font-semibold">{{ left1Data
        .dqtffs }}</span>
    </div>

    <div class="h-[68px]"></div>
    <!-- 电源状态 -->
    <div class="w-full h-[28px] mb-[68px] relative">
      <img class="w-full h-[28px]" src="../assets/one/one_left_1.gif" alt="">
      <div style="color: #80D4FF;"
        class="absolute left-0 right-0 top-0 bottom-0 flex justify-center items-center text-[16px]">
        电源状态
      </div>
    </div>


    <div class="w-[320px] h-[36px] mx-auto relative">
      <img class="w-full h-full" src="../assets/one/one_left_2.png" alt="">
      <img class="w-[80px] h-[36px] left-[40px] bottom-[12px] absolute" src="../assets/one/one_left_3.png" alt="">
      <img class="w-[48px] h-[48px] left-[56px] bottom-[26px] absolute " src="../assets/one/one_left_6.png" alt="">
      <span class="absolute left-[152px] bottom-[16px] text-white text-[16px]">城市供电</span>
      <span :class="left1Data.csgd == '关闭' ? 'status_color' : 'main_color'"
        class="absolute left-[152px] bottom-[42px] text-white text-[24px]  font-semibold">{{ left1Data
        .csgd }}</span>
    </div>

    <div class="w-[320px] h-[36px] mx-auto relative mt-[68px]">
      <img class="w-full h-full" src="../assets/one/one_left_2.png" alt="">
      <img class="w-[80px] h-[36px] left-[40px] bottom-[12px] absolute" src="../assets/one/one_left_3.png" alt="">
      <img class="w-[48px] h-[48px] left-[56px] bottom-[26px] absolute " src="../assets/one/one_left_7.png" alt="">
      <span class="absolute left-[152px] bottom-[16px] text-white text-[16px]">柴油发动机</span>
      <span :class="left1Data.cyfdj == '关闭' ? 'status_color' : 'main_color'"
        class="absolute left-[152px] bottom-[42px] text-white text-[24px]  font-semibold">{{ left1Data
        .cyfdj }}</span>
    </div>


    <div class="mt-[60px] h-[436px]">
      <scrollboard title="温湿度参数" :config="leftOneConfig" :key="compentsKey"></scrollboard>
    </div>

  </div>

</template>

<style scoped></style>
